<template>
	<view>
		<view><map :latitude="latitude" :show-location="true" :longitude="longitude" :markers="markers"
				:polyline="polyline" :scale="scale"></map></view>
		<view class="content">
			<view class="box" @touchstart="move.touchstart" @touchend="move.touchend" :data-lastop="footerHeight"
				@touchmove="move.touchmove">
				<view class="box-top">
					<!-- 本次服务已完成 -->
					<!-- <view class="">纬度 latitude:{{ latitude }}</view>
					<view class="">经度 longitude:{{ longitude }}</view> -->
					<view style="display: flex;justify-content:center">
						请对此次服务做出评价:
					</view>
					<view style="display: flex;justify-content:center">
						<view class="">总体评价:</view> 
						<uni-rate max="5" value="3" >{{rate}}</uni-rate>
					</view>
					<view style="display: flex;justify-content:center">
						<view class="">维修时长:</view>
						<uni-rate max="5" value="3" >{{rate}}</uni-rate>
					</view>
					<view style="display: flex;justify-content:center">
						<view class="">其他评价:</view>
						<uni-rate max="5" value="3" >{{rate}}</uni-rate>
					</view>
				</view>
				<view class="zan"></view>
				<view class="box-center">
					<uni-step :options="list2" active-color="#ff0000" :active="active" direction="column" />
				</view>
			</view>
		</view>
	</view>
</template>
<!-- 获取地理位置 这个key是申请的 感谢-->
<script type="text/javascript" src="https://webapi.amap.com/maps?v=1.3&key=d4332e5adb8b584442266763d20b978c"></script>
<script module="move" lang="wxs" src="./index.wxs"></script>
<script>
	import {
		location
	} from "../../static/js/location.js";
	import UniStep from '../../components/uni-steps/uni-step'
	import uniRate from "../../components/uni-rate/uni-rate.vue"
	export default {
		components: {
			UniStep,
			uniRate
			},
		data() {
			return {
				timeOver: false,
				latitude: 30.623121,
				longitude: 	103.994009,
				markers: [],
				polyline: [],
				scale: 16,
				footerHeight: 0,
				active: 3,
				list2: [
						{title: '电费维修',desc: '开始报修，假装有很多字，凑字数，假装有很多字，凑字数，假装有很多字，凑字数，假装有很多字，凑字数，假装有很多字，凑字数'},
						{title: '电费维修',desc: '凑字数，假装有很多字，凑字数，假装有很多字'},
						{title: '电费维修',desc: '凑字数，假装有很多字，凑字数，假装有很多字'},
						{title: '电费维修',desc: '凑字数，假装有很多字，凑字数，假装有很多字'}
					],
				rate:'请对此次服务做出评价'
			};
		},

		mounted() {
			this.getFooterHeight();
			this.getCurrentPosition();
		},
		methods: {
			// 这里可以做一个scroll-y  的判断。 内部滚动
			changeHeight(val) {
				console.log(val)
			},

			getFooterHeight() {
				let query = wx.createSelectorQuery();
				query
					.select('.box')
					.boundingClientRect(res => {
						console.log(res);
						let height = res.height;
						this.footerHeight = res.height
					})
					.exec();
			},
			getCurrentPosition() {
				let that = this
				uni.getLocation({
					type:'wgs84',
					// type: 'gcj02',
					geocode: true,
					success: res => {
						console.log('调用成功')
						console.log(res.latitude)
						console.log(res.longitude)
						that.latitude =  res.latitude,
						that.longitude = res.longitude
						// that.getFooterHeight()
						// this.getWeather(this.address.city.replace('市', ''));
					},
					fail() {
						console.log('失败');
					},
					complete(){
						console.log('调用结束')
					}
				});
			},

		},

	};
</script>
<style lang="scss" scoped>
	map {
		width: 100%;
		height: 100vh;
	}

	.content {
		position: fixed;
		// background: red;
		width: 100%;
		bottom: 0;
		padding: 0 0 68upx 0;
		z-index: 88;
		text-align: center;
		color: #FFFFFF;
	}

	.box {
		padding-left: 3vw;
		padding-right: 3vw;
		height: calc(22vh);
	}

	.box-top {
		color: black;
		height: 20vh;
		background: white;
		border-radius: 7vw;
	}

	.zan {
		height: 2vh;
	}

	.box-center {
		// padding-top: 30vh;
		color: black;
		// height: 30vh;
		background: white;
		border-radius: 7vw;
	}
</style>
